<template>
  <a-tabs v-model:activeKey = "activeKey">
    <a-tab-pane key="pushLogDetail" tab="基础事项">
      <div class="push-log-list w-full h-full display-flex-column" style="overflow: hidden">
        <div class="btn-box display-flex m-t-sm" style="height: 40px">
          <div class="left-box display-flex">
            <a-button type="primary" @click="onSearch">刷新</a-button>
          </div>
          <div class="right-box flex-1 display-flex" style="justify-content: flex-end">
            <a-checkbox @change="handlerFilterFailChange" class="m-r-sm">
              仅展示异常项
            </a-checkbox>
            <a-input-search
              v-model="searchText"
              placeholder="请搜索"
              enter-button
              @search="onSearch"
              style="width: 350px"/>
          </div>
        </div>
        <div class="content-box m-t-sm" style="overflow: hidden">
          <push-log-detail ref="pushLogDetail"/>
        </div>
      </div>
    </a-tab-pane>
    <a-tab-pane key="pushLogDetailExt" tab="延期变更">
      <div class="push-log-list w-full h-full display-flex-column" style="overflow: hidden">
        <div class="btn-box display-flex m-t-sm" style="height: 40px">
          <div class="left-box display-flex">
            <a-button type="primary" @click="onSearch">刷新</a-button>
          </div>
          <div class="right-box flex-1 display-flex" style="justify-content: flex-end">
            <a-checkbox @change="handlerFilterFailChange" class="m-r-sm">
              仅展示异常项
            </a-checkbox>
            <a-input-search
              v-model="searchText"
              placeholder="请搜索"
              enter-button
              @search="onSearch"
              style="width: 350px"/>
          </div>
        </div>
        <div class="content-box m-t-sm" style="overflow: hidden">
          <push-log-detail ref="pushLogDetail"/>
        </div>
      </div>
    </a-tab-pane>
    <a-tab-pane key="pushLogDetailDes" tab="注销">
      <div class="push-log-list w-full h-full display-flex-column" style="overflow: hidden">
        <div class="btn-box display-flex m-t-sm" style="height: 40px">
          <div class="left-box display-flex">
            <a-button type="primary" @click="onSearch">刷新</a-button>
          </div>
          <div class="right-box flex-1 display-flex" style="justify-content: flex-end">
            <a-checkbox @change="handlerFilterFailChange" class="m-r-sm">
              仅展示异常项
            </a-checkbox>
            <a-input-search
              v-model="searchText"
              placeholder="请搜索"
              enter-button
              @search="onSearch"
              style="width: 350px"/>
          </div>
        </div>
        <div class="content-box m-t-sm" style="overflow: hidden">
          <push-log-detail ref="pushLogDetail"/>
        </div>
      </div>
    </a-tab-pane>
    <a-tab-pane key="messageLogDetail" tab="投资消息">
      <div class="push-log-list w-full h-full display-flex-column" style="overflow: hidden">
        <div class="btn-box display-flex m-t-sm" style="height: 40px">
          <div class="left-box display-flex">
            <a-button type="primary" @click="onSearch">刷新</a-button>
          </div>
          <div class="right-box flex-1 display-flex" style="justify-content: flex-end">
            <a-checkbox @change="handlerFilterFailChange" class="m-r-sm">
              仅展示异常项
            </a-checkbox>
            <a-input-search
              v-model="searchText"
              placeholder="请搜索"
              enter-button
              @search="onSearch"
              style="width: 350px"/>
          </div>
        </div>
        <div class="content-box m-t-sm" style="overflow: hidden">
          <message-log-detail ref="messageLogDetail"/>
        </div>
      </div>
    </a-tab-pane>
    <a-tab-pane key="errorLogDetail" tab="错误日志">
      <div class="push-log-list w-full h-full display-flex-column" style="overflow: hidden">
        <div class="btn-box display-flex m-t-sm" style="height: 40px">
          <div class="left-box display-flex">
            <a-button type="primary" @click="onSearch">刷新</a-button>
          </div>
          <div class="right-box flex-1 display-flex" style="justify-content: flex-end">
            <a-input-search
              v-model="searchText"
              placeholder="请搜索"
              enter-button
              @search="onSearch"
              style="width: 350px"/>
          </div>
        </div>
        <div class="content-box m-t-sm" style="overflow: hidden">
          <error-log-detail ref="errorLogDetail"/>
        </div>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>
<script>
import PushLogDetail from '@v/investmentOnline/interfaceMonitor/detail/PushLogDetail.vue'
import ErrorLogDetail from '@v/investmentOnline/interfaceMonitor/detail/ErrorLogDetail.vue'
import MessageLogDetail from '@v/investmentOnline/interfaceMonitor/detail/MessageLogDetail.vue'
export default {
  name: 'PushLogList',
  components: {
    pushLogDetail: PushLogDetail,
    errorLogDetail: ErrorLogDetail,
    messageLogDetail: MessageLogDetail
  },
  props: {},
  data () {
    return {
      activeKey: 'pushLogDetail',
      searchText: '',
      filterFail: false
    }
  },
  methods: {
    handlerFilterFailChange (e) {
      this.filterFail = e.target.checked
      this.onSearch()
    },
    onSearch () {
      // 根据不同的tab调用不同的方法刷新
      if (this.activeKey === 'errorLogDetail') {
        this.$refs.errorLogDetail.loadData({ filterText: this.searchText, filterFail: this.filterFail + '' }, true)
      } else if (this.activeKey === 'messageLogDetail') {
        const filterFailVal = this.filterFail === true ? '-1' : null
        this.$refs.messageLogDetail.loadData({ filterText: this.searchText, filterFail: filterFailVal }, true)
      } else if (this.activeKey === 'pushLogDetail' || this.activeKey === 'pushLogDetailExt' || this.activeKey === 'pushLogDetailDes') {
        this.$refs.pushLogDetail.loadData({ filterText: this.searchText, filterFail: this.filterFail + '' }, true)
      } else {
        console.log('====> tab页面没有定义点击刷新的方法：', this.activeKey)
      }
    }
  }
}
</script>

<style scoped lang="less">
.push-log-list {
  background-color: white;
  padding: 10px;

  .tab-box {
    .tab-item {
      cursor: pointer;
      padding: 0 20px 5px 20px;
      position: relative;
      user-select: none;
    }

    .tab-item-txt {
      font-size: 18px;
    }

    .tab-item-selected {
      color: #57adec;
      font-weight: bold;
      cursor: auto;
    }

    .tab-item-line {
      position: absolute;
      width: 70%;
      height: 2px;
      background-color: #57adec;
      transform-origin: 50% 50%;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
    }
  }

  .btn-box {
    padding: 0 10px;
  }
}

</style>
